import React, { Component } from 'react'
import * as echarts from 'echarts';
import axios from 'axios';
export default class Statistics extends Component {

    // 统计查询方法
    componentDidMount() {
        //饼图
        axios.get("/api/payment/order/count/payType").then(res=>{
            console.log(res.data)
            const result=res.data.countPayType.map(item=>{
                return {name:item.payName,value:item.nums}
            })
            this.pie(result)
        })
    }
    pie = (result) => {
        // 基于准备好的dom，初始化echarts实例
        var pie = echarts.init(document.getElementById('pie'));
        // 绘制图表
        pie.setOption({
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data:result
                }
            ]
        });
    }
    render() {
        return (
            <div style={{display:"flex"}}>
                <div id='pie' style={{ width: 800, height: 600 }}></div>
                <div id='line' style={{ width: 780, height: 600 }}></div>
            </div>
        )
    }
}
